<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <title>夜蒲show 列表页面</title>

    <link rel="stylesheet" href="../css/mui.min.css" />
    <link rel="stylesheet" href="../css/ye-shop-list.css" />
    <style type="text/css">
        .menu-wrapper.mui-active,
        .menu-wrapper.mui-active .menu {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        /** 自己设置的颜色 */
        
        body,
        html,
        .mui-table-view {
            background-color: #0D0C14;
        }
        
        .yty-foneColor {
            color: #FFFFFF;
            background-color: #000000;
        }
        
        .yty-foneColor a {
            background-color: #000000;
            color: #DDFFDD;
        }
        
        .mui-table-view-cell>a:not(.mui-btn).mui-active {
            background-color: #666666;
            /*color: #fefefe;*/
        }
        
        .mui-bar {
            background-color: #0D0C14;
            height: 44px;
            font-size: 12px;
            font-family: PingFang SC;
        }
        
        .mui-title {
            color: #FFFFFF;
        }
        
        .mui-icon {
            color: #CCCCCC;
        }
        
        #yty-near {
            margin: 0px;
            padding: 0px;
            height: 210px;
        }
        
        #yty-btn {
            margin: 0px;
            padding: 0px;
            height: 40px;
            background-color: #0D0C14;
        }
        
        #sliderSegmentedControl {
            position: relative;
        }
        
        .yty-foneColor a {
            color: #FFFFFF;
            font-family: PingFang SC;
            font-size: 15px;
            padding-right: 35px;
            background-image: url("../images/down.png");
            background-repeat: no-repeat;
            background-position: 108px 15px;
            background-size: 14px 8px;
            padding-left: 9px;
        }
        
        #yty-pullrefresh {
            margin: 0px;
            padding: 0px;
        }
        
        #yty-pullrefresh li {
            height: 180px;
            ;
            background-color: #000000;
        }
        
        #yty-pullrefresh a {
            height: 100%;
            width: 100%;
        }
        
        .mui-table-view-cell:after {
            /**
			      *  下划线
			      */
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0px;
            height: 0px;
            background-color: #000000;
        }
        
        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
            color: #ff4777;
        }
        /*信息盒子*/
        
        #yty-pullrefresh span {
            padding: 4px;
            border: 0px solid;
            border-radius: 5px;
            -moz-border-radius: 5px;
            background-color: rgba(23, 21, 34, 0.4);
            color: #FFFFFF;
            font-family: PingFang SC;
        }
        
        .ms-con-content {
            flex-direction: column;
            display: flex;
            margin-top: 80px;
        }
        
        .ms-content-com {
            font-size: 13px;
            display: flex;
            justify-content: space-between;
            padding-left: 10px;
        }
        
        .name {
            height: 35px;
            font-size: 18px;
            line-height: 35px;
        }
        
        .ms-com-right {
            /*display: block;*/
            flex-flow: right;
        }
        
        .money {
            font-style: normal;
            color: #e6d227 !important;
        }
    </style>


</head>

<body>
    <header class="mui-bar mui-bar-nav" style="z-index: 11;">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">
            <div id="list-header">{{ getContent(ktv) }}</div>
        </h1>
    </header>

    <!-- 滚动广告 -->

    <div id="yty-near" class="mui-slider  yty-ad">
        <div class="mui-slider-group mui-slider-loop">
            <div v-for="item in items" v-bind:class="item.ytyclass">
                <a href="#">
                    <!-- 测试 -->
                    <img v-bind:src="item.ytyimg">
                </a>
            </div>
        </div>

        <div class="mui-slider-indicator">
            <div v-for="ytydiv in ytydivs" v-bind:class="ytydiv.divclass"></div>
        </div>
    </div>



    <!-- 多选择 -->
    <div id="yty-btn" class="mui-slider yty-mui-slider">
        <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted yty-foneColor">
            <a title="位置" id="position" class="mui-control-item" href="#">位置</a>
            <a title="人均" id="average" class="mui-control-item" href="#">人均</a>
        </div>
    </div>



    <!-- 多选择－列表 -->
    <div id="menu-wrapper" class="menu-wrapper hidden">
        <div id="menu" class="menu">
            <ul class="mui-table-view mui-table-view-inverted">
                <li class="mui-table-view-cell" v-for='item in items'>
                    <a href="javascript:;" :getPri='item.doPrice' :getId='item.region_id'>{{item.region_name}}</a>
                </li>
            </ul>
        </div>
    </div>

    <!--图列表 -->
    <div id="yty-pullrefresh" class="mui-scroll-wrappe yty-table-cell">
        <div class="mui-scroll">

            <ul class="mui-table-view ">
                <!-- mui-table-view-chevron-->
                <li v-for="ytyCellData in ytyCellDatas" class="mui-table-view-cell" :style="'background:url('+ytyCellData.shop_img+') no-repeat'">
                    <a href="../html/ye-shop-details.html" :ms-id='ytyCellData.supplier_id'>
                        <div class="ms-con-content">
                            <div class="ms-content-title">
                                <span class="name">「{{ytyCellData.supplier_name}}」</span>
                            </div>
                            <div class="ms-content-com">
                                <span class="address">{{ytyCellData.region_name?ytyCellData.region_name:'未知' }}</span>
                                <span class="ms-com-right">
                                <i class="money">{{ytyCellData.per_price}}</i>元/每人起
                                </span>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>


    <!--https://unpkg.com/vue/dist/vue.js-->
    <script src="../js/vue.js"></script>
    <script src="../js/mui.min.js"></script>
    <script src="../js/ye-shop-list.js"></script>
    <script type="text/javascript" charset="UTF-8"></script>
</body>

</html>